<template>
  <div class="recordDetail">
    <Navbar :appTitle="title" @eventGetHeight="getHeight" />
    <!--头部-->
    <div class="d-head"  id="headdd">
      <div class="content">
        <div class="left">
          <div class="title">
            {{ detailInfo.applicantIdText }}提交的补料申请
          </div>
          <div class="row">{{ detailInfo.applyNo || "--" }}</div>
          <div class="row">
            {{ detailInfo.applicantIdText }},{{ detailInfo.applyTime || "--" }}
            发起申请
          </div>
        </div>
        <!--ids="MESS_REMEDY_MATERIAL_APPLY" -->
        <imgStatus
          :flowStatus="detailInfo.flowStatus"
        ></imgStatus>
      </div>
    </div>

    <van-tabs v-model="active" scrollspy sticky :offset-top="158">
      <!--基本信息 -->
      <van-tab title="基本信息" :style="calssDD">
        <div class="otherTaps">
          <div class="title">
            <span class="icon"></span>
            <span class="content">基本信息</span>
          </div>
          <div class="content">
            <div class="row">
              <span class="r-label">工单编号：</span>
              <span class="r-column">{{ detailInfo.orderCode || "--" }}</span>
            </div>
            <div class="row">
              <span class="r-label">生产物料：</span>
              <span class="r-column"
                >{{ detailInfo.goodsCode || "--" }}-{{
                  detailInfo.goodsName || "--"
                }}</span
              >
            </div>
            <div class="row">
              <span class="r-label">基本单位：</span>
              <span class="r-column">{{
                detailInfo.basicUnitText || "--"
              }}</span>
            </div>
            <div class="row">
              <span class="r-label">补料人：</span>
              <span class="r-column">{{
                detailInfo.remedyIdText || "--"
              }}</span>
            </div>
            <div class="row">
              <span class="r-label">领用时间：</span>
              <span class="r-column">{{ detailInfo.remedyTime || "--" }}</span>
            </div>
            <div class="row">
              <span class="r-label">补料原因：</span>
              <span class="r-column">{{ detailInfo.reason || "--" }}</span>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="补用物料">
        <div class="otherTaps">
          <div class="title">
            <span class="icon"></span>
            <span class="content">补用物料</span>
          </div>
          <div
            class="content"
            v-for="(item, index) in detailInfo.infoVoList"
            :key="index"
          >
            <div class="row">
              <span class="r-column">{{ item.goodsFullName || "--" }}</span>
            </div>
            <div class="row">
              <span class="r-label">物料规格：</span>
              <span class="r-column">{{ item.goodsSpec || "--" }}</span>
            </div>
            <div class="row">
              <span class="r-label" style="white-space: nowrap"
                >本次补料量：</span
              >
              <span class="r-column"
                >{{ item.num !== "" || item.num !== null ? item.num : "--" }}
                {{ item.goodsBasicUnitText }}</span
              >
            </div>
            <div class="row">
              <span class="r-label">出库数量：</span>
              <span class="r-column"
                >{{
                  item.inOutBoundNum !== "" || item.inOutBoundNum !== null
                    ? item.inOutBoundNum
                    : "--"
                }}
                {{ item.goodsBasicUnitText }}</span
              >
            </div>
            <div
              v-if="
                detailInfo.infoVoList.indexOf(item) + 1 !==
                detailInfo.infoVoList.length
              "
              class="bottomLine"
            ></div>
          </div>
        </div>
      </van-tab>

      <div class="otherMargin"></div>
      <van-tab title="其它">
        <div class="otherTaps" style="margin-top: 0">
          <div class="title">
            <span class="icon"></span>
            <span class="content">其它</span>
          </div>
          <div class="content">
            <div class="row">
              <span class="r-label">备注：</span>
              <span class="r-column">{{ detailInfo.remark || "--" }}</span>
            </div>
            <div class="row">
              <span class="r-label">附件：</span>
              <span class="r-column">
                <upload
                  class="fileclass"
                  iconType="fj"
                  :fileIds="detailInfo.attachment"
                  :showUpload="false"
                ></upload>
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <div v-if="detailInfo.flowInstId" class="otherMargin"></div>
      <van-tab v-if="detailInfo.flowInstId" title="审批流程" :style="bottomHeight">
        <div>
          <!--  ids="MESS_REMEDY_MATERIAL_APPLY" -->
          <Examine
            type="2"
            :id="detailInfo.flowInstId"
            ref="examine"
          />
        </div>
      </van-tab>
    </van-tabs>
    <div class="ExamineBottom"></div>
    <!--提交按钮 -->
    <div v-if="$route.query.applyType == 'waiterDeal'" class="search-bottom">
      <span class="btncancel" @click="cancel">拒绝</span>
      <span class="btnconfirm" @click="confirm">同意</span>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import { APILX } from "@/api/requestLx";
import { getEnableOne } from "@/api/api";
import imgStatus from "@/components/imgStatus/imgStatus";
import Examine from "@/components/examine";
import upload from "@/components/upload/upload";
export default {
  name: "addMaterialRequisitionDetail", //补料单详情
  components: { Navbar, upload, Examine, imgStatus },
  data() {
    return {
      bodyHeight: "",
      runingHeight: "",
      bottomHeight: "padding-bottom:1.5rem",
      calssDD: "",
      active: 0,
      detailInfo: {},
      shows: false, //是否开启了审批
      title: this.$route.meta.title,
      fileIds: "",
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.getDetail();
    // 判断是否从审批过来
    this.isApproval();
    this.getEnableOne();
  },
  methods: {
    bottomOtherHeightCheck() {
      if (this.shows) {
        return "";
      } else {
        console.log(this.bodyHeight);
        if (this.bodyHeight < 736) {
          return "padding-bottom:3.5rem";
        }
        if (this.bodyHeight >= 736 && this.bodyHeight < 812) {
          return "padding-bottom:4rem";
        }
        if (this.bodyHeight >= 812 && this.bodyHeight < 896) {
          return "padding-bottom:4.5rem";
        }
        if (this.bodyHeight >= 896) {
          return "padding-bottom:5rem";
        }
      }
    },
    getHeight(data) {
      this.bodyHeight = document.body.clientHeight; //屏幕高度
      if (this.bodyHeight >= 736) {
        this.bottomHeight = "padding-bottom:2rem";
      }
      if (this.bodyHeight >= 812) {
        this.bottomHeight = "padding-bottom:2.5rem";
      }
      if (this.bodyHeight >= 896) {
        this.bottomHeight = "padding-bottom:3rem";
      }
      this.runingHeight =
        data + document.getElementById("headdd").offsetHeight + 18;
      this.calssDD = "margin-top:" + (this.runingHeight + 12) + "px";
    },
    //   判断是否开启审批
    getEnableOne() {
      getEnableOne({ id: "MESS_REMEDY_MATERIAL_APPLY", type: "add" }).then(
        (res) => {
          if (res.result && res.result == "false") {
            this.shows = false;
            this.tabsNum -= 1;
          } else {
            this.shows = true;
          }
        }
      );
    },
    isApproval() {
      if (localStorage.getItem("approval") === "success") {
        let paramsObj = {
          applyType: "waiterDeal",
        };
        let pathUrl = "/waiterApply";
        this.$router.push({
          path: pathUrl,
          query: paramsObj,
        });
      }
      localStorage.removeItem("approval");
    },
    getDetail() {
      let id = this.$route.query.id;
      APILX.messRemedyMaterialApplyQueryById(id).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result;
          console.log(this.detailInfo, "this.detailInfo");
          // this.goodsTable.dataSource = res.result.infoVoList
        } else {
          this.$antdMessage.error(res.result);
        }
      });
    },
    cancel() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 0, taskId: this.$route.query.taskId },
      });
    },
    confirm() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 1, taskId: this.$route.query.taskId },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/views/workManagement/materialRequisition/materialDetail.scss";
/deep/ .van-tab__pane{
  margin-top: 0.1rem !important;
}
/deep/ .van-tabs__content{
  margin-top: 122px !important;
}
</style>
